<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">

    <style>
        th .layui-table-cell{
            height: 30px;
        }
        .layui-table-cell{
            height: 120px;
        }

        .layui-table img {
            width: 140px;
            height: 110px;
        }

    </style>

</head>
<body>

<form action="" lay-filter="xiugai" id="updBook" class="layui-form"  hidden>
    <input type="hidden" name="bookid" lay-verify="bid"  placeholder="请输入bookid" autocomplete="off" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-inline">
            <input type="text" name="bookname" lay-verify="required"   placeholder="请输入书名" autocomplete="off" class="layui-input">
        </div>

       <%-- <label class="layui-form-label">数量</label>
        <div class="layui-input-inline">
            <input type="text" name="count" lay-verify="required" placeholder="请输入该书的数量" autocomplete="off" class="layui-input">
        </div>
--%>
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
            <select name="typeid" lay-verify="required" id="addTypeId" lay-filter="aihao">
                <option value="">请选择书籍的类型</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">介绍</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" lay-verify="required" placeholder="请输入该书的介绍" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" name="price" lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>

     <%--   <label class="layui-form-label">上传文件</label>
        <div class="layui-input-inline">
            <input type="text" name="url" lay-verify="required" placeholder="请输入该书的介绍" autocomplete="off" class="layui-input">
        </div>--%>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text" name="author" lay-verify="required" placeholder="请输入作者名" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-inline">
            <input type="text" lay-verify="required" name="publisher" placeholder="请输入出版社" autocomplete="off" class="layui-input">
        </div>
    </div>
  <%--  &lt;%&ndash;图片上传&ndash;%&gt;
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon">点击上传</i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img id="img1" src="" alt="上传成功后渲染" style="width:100px;height:100px">
            &lt;%&ndash;用来存储图片上传成功后返回的url&ndash;%&gt;
            <input type="hidden" id="imageUrl" name="url"/>
        </div>
    </div>
--%>

        <%--上传图书图片--%>
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon">点击上传</i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
          <img id="img1" src="" alt="上传成功后渲染" style="width:100px;height:100px">
           <%-- 用来存储图片上传成功后返回的url--%>
            <input type="hidden" id="imageUrl" name="url"/>
        </div>
        <h1>图片展示</h1>
        <img id="img" src=""  style="width:100px;height:100px">
    </div>

    <%--<div>
        <h1>图片展示</h1>
        <img id="img" src=""  style="width:100px;height:100px">
    </div>--%>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addAndUpdate">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<%--搜索框表单--%>
<br>
<form action=""  id="updBook" class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-inline">
            <input type="text" name="bookname"  placeholder="请输入书名" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
            <select name="typeid"  id="addlx" lay-filter="aihao">
                <option value="">请选择书籍的类型</option>
            </select>
        </div>
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text" name="author"  placeholder="请输入作者名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-submit lay-filter="ssss">搜索</button>
        </div>
    </div>
</form>



<%--查询页面--%>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i></button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="shuaxin"><i class="layui-icon">&#xe669;</i></button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <%--当status的值是1时，此时显示表示上架，所以要显示下架--%>
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="shangjia">下架</a>
    {{#  } }}
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="shangjia">上架</a>
    {{#  } }}
</script>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>

<script>
    layui.use(['table','layer','form','jquery','upload'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form  = layui.form;
        var upload =layui.upload;

        function showtable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/book/selectBook'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'bookid', title:'bookid',fixed: 'left',hide:true,unresize: true, sort: true}
                    ,{field:'url',title:'书籍图片',edit: 'text',templet:function (d){
                            return '<img src="'+d.url+'" width="100px" height="100px"/>';
                        }}
                    ,{field:'bookname', title:'书名',  edit: 'text'}
                    ,{field:'author', title:'作者',  edit: 'text'}
                    ,{field:'count', title:'数量',  edit: 'text'}
                    ,{field:'remark', title:'介绍',  edit: 'text', sort: true}
                    ,{field:'typeid', title:'类型编号', edit: 'text',hide:true}
                    ,{field:'typename', title:'类型', edit: 'text',sort: true}
                    ,{field:'publisher', title:'出版社',edit: 'text'}

                    ,{field:'price', title:'价格', edit: 'text' ,sort: true}
                    ,{field:'status', title:'状态', edit: 'text',templet:function (d) {
                            if (d.status == 1){
                                return'<button class="layui-btn layui-btn-xs layui-btn-radius">上架</button>';
                            }else {
                                return '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">下架</button>';
                            }
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,even:true
                ,page: true
                ,limit:5
                ,limits:[3,5,7,9]
            });
        }

        //查询所有书籍类型，并填充到下拉框中
        function showselect(){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/type/selectType',
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    //通过循环遍历查到的所有类型，并填充到类型下拉框中
                    var op="";
                    for (var i=0;i<data.length;i++){
                        op +="<option value='"+data[i].typeid+"'>"+data[i].typename+"</option>";
                    }
                    $("#addTypeId").append(op);
                    $("#addlx").append(op);
                    form.render('select');//表单的更新渲染 下拉框
                }
            })
        }

        //页面整个加载完成时执行
        $(function () {
            showtable();
            showselect();
        })

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'add':
                    $("#updBook")[0].reset(); //新增之前 先把弹出的form表单中的值清空
                    layer.open({
                        type: 1,
                        title:'新增信息',
                        area: ['700px', '300px'],
                        anim:6,
                        content: $('#updBook') //这里content是一个普通的String
                    });
                    break;
                case 'shuaxin':
                    showtable();
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        /*
        * 搜索表单的提交
        * */
        form.on('submit(ssss)', function(data){
            table.reload('test',{
                where:{
                    bookname:data.field.bookname,
                    typeid:data.field.typeid,
                    author:data.field.author
                },page: {
                    curr:1
                }
            })
        });

      // 上传文件
        upload.render({
            elem: '#test10'
            ,url: '${pageContext.request.contextPath}/book/upload' //改成您自己的上传接口
            ,//用于文件上传前的回调
            choose: function(obj){

                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    $("#img").attr("src",result);
                    //result得到图像的base64编码
                });
            }
            ,done: function(res){//上传成功后的回调函数

                //$("#imgpath").val(res);
                $("#imageUrl").val(res.url);//将上传成功后得到的图片的url返回，并且赋值给表单中隐藏url框
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.str);
            }
        });

        // 修改和添加 按钮的表单提交事件
        form.on('submit(addAndUpdate)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/addBook',
                dataType:'json',//预期的后台数据类型
                data:data.field,//当前表单的所有数据
                success:function (result) {
                   if (result.code!=1001){
                       layer.closeAll();
                       showtable();
                       layer.msg(result.msg);
                   }else {
                       layer.msg(result.msg);
                   }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'shangjia'){
                layer.confirm('确定要上架/下架吗', function(index){
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/book/updateStat',
                        dataType:'json',//预期的后台数据类型
                        data:{"bookid":data.bookid,"status":data.status},//当前表单的所有数据
                        success:function (data) {
                            if (data == "1001"){
                                layer.alert('执行成功', {icon: 1});
                            }else {
                                layer.alert('执行失败', {icon: 5});
                            }
                            showtable();
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                $("#updBook")[0].reset();//将弹出的表单中的内容 提前清空，然后再填值
                layer.open({
                    type: 1,
                    title:'修改信息',
                    area: ['700px', '300px'],
                    anim:6,
                    content: $('#updBook') //这里content是一个普通的String
                });
                form.val('xiugai',data);//将当前点击行的数据填充到form表单中
            }
        });
    });
</script>

</body>
</html>
